<template>
    <div class="app-container">
        <el-form :model="queryParams" ref="queryForm" :inline="true"  label-width="88px">
            <el-form-item label="日期：" prop="type">
                <el-date-picker
                       v-model="dateTime"
                       type="date"
                       size="small"
                       value-format="yyyy-MM-dd"
                       @change="onChangeDate"
                       placeholder="选择日期">
                  </el-date-picker>
         </el-form-item>
         <el-form-item label="园所性质：" prop="schoolType">
          <el-select v-model="queryParams.schoolType" placeholder="请选择园所性质" clearable size="small">
            <el-option v-for="dict in schoolTypeOptions" :key="dict.dictValue" :label="dict.dictLabel" :value="dict.dictValue" />
          </el-select>
         </el-form-item>
         <el-form-item label="地区类型：" prop="type">
          <el-select v-model="queryParams.nature" placeholder="请选择地区类型" clearable size="small">
            <el-option v-for="dict in schoolNatureOptions" :key="dict.dictValue" :label="dict.dictLabel" :value="dict.dictValue" />
          </el-select>
         </el-form-item>
         <el-form-item label="园所名称：" prop="schoolName">
                        <el-input
                          v-model="queryParams.schoolName"
                          placeholder="请输入园所名称"
                          clearable
                          size="small"
                        />
                      </el-form-item>

         <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
         </el-form-item>
    </el-form>
    <el-table v-loading="loading" :data="ysList" >
              <el-table-column type="index" align="center" label="序号" :index="customeIndex" width="80"></el-table-column>
              <el-table-column  align="center" label="园所名称"  prop="schoolName"></el-table-column>
              <el-table-column  align="center" label="地区类型"  prop="nature" :formatter="schoolNatureFormat">
              </el-table-column>
              <el-table-column  align="center" label="园所性质"  prop="schoolType" :formatter="schoolTypeFormat">
              </el-table-column>
              <el-table-column  align="center" label="总人数"  prop="total"></el-table-column>
              <el-table-column  align="center" label="睡眠评分"  prop="score"></el-table-column>
              <el-table-column  align="center" label="午睡人数"  prop="sleepTotal"></el-table-column>
              <el-table-column  align="center" label="数据来源">睡眠带</el-table-column>
              <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
                <template slot-scope="scope">
                  <el-button
                    size="mini"
                    type="text"
                    icon="el-icon-view"
                    @click="handleView(scope.row)"
                  >查看</el-button>
                </template>
              </el-table-column>
           </el-table>
           <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
        @pagination="getList" />
    <!-- <div class="charts"  >
        <div class="title">入园率{{ 95 }}%</div>
            <div  ref="chartpDom" class="chart_dom"></div>
    </div> -->
     <!-- 园所内各个班级幼儿情况 -->
     <el-dialog title="班级午睡情况" :visible.sync="open" width="950px" append-to-body>
        <el-form :model="classParams" ref="queryForm" :inline="true"  label-width="88px">
            <el-form-item label="班级:" prop="class">
                <el-select v-model="classParams.class" placeholder="请选择班级" clearable size="small">
                  <el-option v-for="item in classOptions" :key="item.id" :label="item.title" :value="item.id" />
                 </el-select>
             </el-form-item>
            <el-form-item>
             <el-button type="primary" icon="el-icon-search" size="mini" @click="classQuery">搜索</el-button>
             <el-button icon="el-icon-refresh" size="mini" @click="classReset">重置</el-button>
            </el-form-item>
    </el-form>
    <el-table v-loading="loading" :data="bjList" >
              <el-table-column type="index" align="center" label="序号" :index="customeIndex" width="80"></el-table-column>
              <el-table-column  align="center" label="班级"  prop="className"></el-table-column>
              <el-table-column  align="center" label="总人数"  prop="total"></el-table-column>
              <el-table-column  align="center" label="午睡人数"  prop="sleepTotal"></el-table-column>
              <el-table-column  align="center" label="睡眠评分"  prop="score"></el-table-column>
              <el-table-column  align="center" label="数据来源">睡眠带</el-table-column>
              <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
                <template slot-scope="scope">
                  <el-button
                    size="mini"
                    type="text"
                    icon="el-icon-view"
                    @click="handleClass(scope.row)"
                  >查看</el-button>
                </template>
              </el-table-column>
           </el-table>
           <pagination v-show="classtotal>0" :total="classtotal" :page.sync="classParams.pageNum" :limit.sync="classParams.pageSize"
        @pagination="getClassData" />
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="classOk">确 定</el-button>
          <el-button @click="classCancel">取 消</el-button>
        </div>
      </el-dialog>
        <!-- 单个幼儿午睡情况 -->
     <el-dialog title="幼儿午睡信息" :visible.sync="childOpen" width="800px" append-to-body>
        <el-form :model="childParams" ref="queryForm" :inline="true"  label-width="88px">
            <el-form-item label="幼儿名称" prop="name">
                        <el-input
                          v-model="childParams.name"
                          placeholder="请输入幼儿名称"
                          clearable
                          size="small"
                        />
                      </el-form-item>

         <el-form-item>
             <el-button type="primary" icon="el-icon-search" size="mini" @click="getStudentList">搜索</el-button>
             <el-button icon="el-icon-refresh" size="mini" @click="childReset">重置</el-button>
            </el-form-item>
    </el-form>
    <el-table v-loading="loading" :data="childsList" >
              <el-table-column type="index" align="center" label="序号" :index="customeIndex" width="80"></el-table-column>
              <el-table-column  align="center" label="幼儿姓名"  prop="name"></el-table-column>
              <!-- <el-table-column  align="center" label="睡眠评分"  prop="attendance0"></el-table-column> -->
              <el-table-column  align="center" label="午睡时长(小时)"  prop="sleepTimeHour"></el-table-column>
              <el-table-column  align="center" label="开始时间"  prop="startTime"></el-table-column>
              <el-table-column  align="center" label="结束时间"  prop="endTime"></el-table-column>
              <!-- <el-table-column  align="center" label="上下床时间"  prop="attendance0"></el-table-column> -->
              <!-- <el-table-column  align="center" label="入园率"  prop="ryl"></el-table-column> -->
           </el-table>
           <pagination v-show="childtotal>0" :total="childtotal" :page.sync="childParams.pageNum" :limit.sync="classParams.pageSize"
        @pagination="getStudentList" />
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="childOk">确 定</el-button>
          <el-button @click="childCancel">取 消</el-button>
        </div>
      </el-dialog>
    </div>
</template>
<script>
  import { specificList,clazzList,classData,studentList,sleepSeeOne,sleepSeeTwo,sleepSeeThree } from "@/api/qu/qyyerygk";
  import { selectSemster} from "@/api/base/semster";
  import moment from "moment";
  import { formatDateOnly} from "@/utils";
 export default {
   name: "wssj",
   data() {
     return {
         schoolCode:'',
         loading:true,
         dateTime:new Date(),
          // 查询参数
          queryParams: {
             area:'',
             name:'',
             nature:'',
             pageNum: 1,
             pageSize: 10,
             schoolType:'',
           },
              // 学期数据
            semsterList: [],
           schoolNatureOptions:[],
           schoolTypeOptions:[],
           gradeOptions:[],
           classOptions:[],
           charts:null,
           ysList:[],
           bjList:[],
           childsList:[],
           total:0,
           classtotal:0,
           childtotal:0,
           open:false,
           classParams:{
             class:'',
             grade:'',
             pageNum: 1,
             pageSize: 10,
           },
           childParams:{
            name:'',
            pageNum: 1,
            pageSize: 10,
           },
           childOpen:false,
           previousDate:'',
           stutendId:null
        }
   },
   created() {
        // 获取当前日期
        const currentDate = new Date();
        // 获取前一天的日期
        this.previousDate = new Date(currentDate);
        this.previousDate.setDate(currentDate.getDate() - 1);
        this.dateTime = formatDateOnly(this.previousDate)


        this.getDicts("park_type").then(response => {
          this.schoolTypeOptions = response.data;
        });
         this.getDicts("school_nature").then(response => {
          this.schoolNatureOptions = response.data;
        });
        // this.getDicts("classname_type").then(response => {
        //   this.classOptions = response.data;
        // });
        selectSemster({'status':1}).then(response => {
        this.semsterList = response.rows;
      });
        this.getDicts("year_type").then(response => {
          this.gradeOptions = response.data;
        });
   },
   mounted(){
        this.getList()
        // this.charts = this.$echarts.init(this.$refs.chartpDom);
        // this.chartsFun();
   },
   methods: {
        async getList(){
            this.loading=true;
            try {
              const obj={
                nature:this.queryParams.nature,
                schoolName:this.queryParams.schoolName,
                sleepDate:this.dateTime,
                area:this.queryParams.area,
                pageNum: this.queryParams.pageNum,
                pageSize: this.queryParams.pageSize,
                schoolType:this.queryParams.schoolType
              }
             const data =  await sleepSeeOne(obj)
             this.ysList=data.rows;
             this.total=data.total
             this.loading=false;
            } catch (error) {
              console.log(error);
            }
        },
        onChangeDate(){
        },
        //clazzList 获取班级列表
       async  getClazzList(){
            try {
               const obj ={
                 schoolCode:this.schoolCode,
                 year:this.classParams.grade
               }
              const data=  await  clazzList(obj)
              this.classOptions=data.rows
              console.log(data);
            } catch (error) {
              console.log(error);
            }
        },
        getGradechange(){
            this.getClazzList()
        },
        //下钻到班级层面
        async getClassData(){
            try {
              const obj={
                schoolCode:this.schoolCode,
                sleepDate:this.dateTime,
                grade:this.classParams.grade,
                // classCode:this.classParams.class,
                classId:this.classParams.class,
                pageNum: this.classParams.pageNum,
                pageSize: this.classParams.pageSize,
              };
              const data= await sleepSeeTwo(obj);
              this.bjList=data.rows;
              this.classtotal=data.total;
              console.log(data);
            } catch (error) {
              console.log(error);
            }
        },
        //下钻到幼儿层面
        async  getStudentList(val){

          try {
            const obj ={
                schoolCode:this.schoolCode,
                sleepDate:this.dateTime,
                classId:this.stutendId,
                grade:val.grade,
                name:this.childParams.name,
                pageNum: this.childParams.pageNum,
                pageSize: this.childParams.pageSize,
            }

            const data=  await sleepSeeThree(obj)
            this.childsList=data.rows;
            this.childtotal=data.total;
            console.log(data);
          } catch (error) {
              console.log(error);
          }
        },
          // 班级字典翻译
          gradeTypeFormat(row, column) {
            return this.selectDictLabel(this.gradeOptions, row.grade);
         },
          // 园所性质字典翻译
       schoolTypeFormat(row, column) {
         return this.selectDictLabel(this.schoolTypeOptions, row.schoolType);
       },
       //地区类型字典翻译
       schoolNatureFormat(row, column) {
         return this.selectDictLabel(this.schoolNatureOptions, row.nature);
       },
          // 序号
       customeIndex(index){
         return index+1+(this.queryParams.pageNum-1)*this.queryParams.pageSize
      },
      //打开园所内各个班级弹框
       handleView(val){
           console.log(val);
            this.schoolCode=val.schoolCode;
            this.getClazzList();
            this.getClassData()
            this.open=true;
       },
       classQuery(){
          this.getClassData()
       },
       classReset(){
        this.classParams={
             class:'',
             grade:'',
             pageNum: 1,
             pageSize: 10,
        }
        this.getClassData()
       },
       classOk(){
        this.open=false;
        this.classParams={
             class:'',
             grade:'',
             pageNum: 1,
             pageSize: 10,
        }
       },
       classCancel(){
         this.open=false;
         this.classParams={
             class:'',
             grade:'',
             pageNum: 1,
             pageSize: 10,
        }
       },
        //打开园所内各个班级的幼儿弹框
       handleClass(val){
         console.log(val);
         this.childOpen=true;
        this.stutendId = val.classId
         this.getStudentList(val)
       },
        //重置单个幼儿情况
       childReset(){
        this.childParams = {
            name:'',
            pageNum: 1,
            pageSize: 10,
        }
        this.getStudentList()
        this.stutendId = null
       },
       childOk(){
            this.childOpen=false;
            this.childParams={
                name:'',
                pageNum: 1,
                pageSize: 10,
            }
       },
       childCancel(){
        this.childOpen=false;
        this.childParams={
                name:'',
                pageNum: 1,
                pageSize: 10,
            }

       },
        onChangeDate(){

        },
       /** 搜索按钮操作 */
       handleQuery() {
          this.queryParams.pageNum = 1;
          this.getList();
        },
         /** 重置按钮操作 */
         resetQuery() {
          this.queryParams =  {
             area:'',
             name:'',
             nature:'',
             pageNum: 1,
             pageSize: 10,
             dateTime: formatDateOnly(this.previousDate)
           },

          this.resetForm("queryForm");
          this.handleQuery();
        },
   }
 };
</script>
<style lang="scss" scoped>
 .charts{
            // margin-top: 10px;
            width:75%;
            height: 500px;
            .title{
                position: relative;
                top: 30px;
                left: 45%;
                font-weight: 700;
                font-size: 18px;
                color: #2a77cf;
            }
            // border: 1px red solid;
            .chart_dom{
                width:100%;
                height: 100%;
            }
        }
</style>
